<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue v-model 修饰符</title>
    <link rel="stylesheet" href="./css/global.css">
</head>

<body>
    <div id="app">
        <div>
            <h2>{{title}}</h2>
            <ul>
                <li v-for='msg in messages'>{{msg}}</li>
            </ul>
        </div>

        <div>
            <!-- 1. 修饰符：lazy -->
            <input type="text" v-model.lazy='name'><br>
            <span>Name: {{name}}</span>
        </div>

        <div>
            <!-- 2. 修饰符：number -->
            <input type="number" v-model.number='age'><br>
            <span>Age: {{age}}-{{typeof age}}</span>
        </div>

        <div>
            <!-- 3. 修饰符：trim -->
            <input type="text" v-model.trim='addr'><br>
            <span>Address: {{addr}}</span>
        </div>
    </div>

    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                title: 'v-model 修饰符',
                messages: [
                    `lazy 修饰符：默认情况下，v-model 绑定的input 输入数据时是实时刷新的，可以让input在失去焦点或者按下回车时才会更新!`,
                    `number 修饰符：默认情况下，输入框中输入的无论是字符还是数字，都会被当做字符串类型进行处理，number 修改符可以将输入的内容当做数字类型来处理`,
                    `trim 修饰符：对输入的内容进行首尾去空格处理`
                ],
                name: '孔雀',
                age: 0,
                addr: ' '
            },
            computed: {},
            methods: {}
        });
    </script>
</body>

</html>